<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>留学生管理系统</title>  
        <link rel="stylesheet" href="${path}/css/admin2.css">
        <style>
            #course-modal-1, #course-modal-2{
                margin: 12% auto;
                padding: 10px;
                width: 500px;
            }
            #course-modal-1 td input, #course-modal-2 td input{
                width:358px;
                height:27px 
            }
            #course-modal-1 select,#course-modal-2 select{
            width:358px;
            height:27px;
            }
        </style>
        <script>
            var _current_item = "#admincoumanage";
            
            function setSelectChecked(selectId, checkValue){  
                var select = document.getElementById(selectId);  
                for(var i=0; i<select.options.length; i++){  
                    if(select.options[i].name == checkValue){  
                        select.options[i].selected = true;
                        break;  
                    }  
                }  
            }; 
        </script>
        <script type="text/javascript" src="${path}/js/jquery.min.js"></script>
    </head>
    <body>
        <!--header-->
        <div id="above-mask">
            <div class="fileupload pannel hide" id="fileupload-pannel">
                <div class="close-container">
                    <a class="close" onclick="hide('#above-mask, #mask, #fileupload-pannel');">×</a>
                </div>
                <form action="${path}/admincoumanage/fileUpload" method="post" enctype="multipart/form-data" name="fileForm">
                    <div style="margin-top: 30px;"> 上传文件：（支持Excel 97-2003 工作簿 .xls格式文件）</div>
                    <input id="fileCover" class="left" readonly="readonly" placeholder="导入excel文件" type="text" style="width: 280px; height: 22px;">
                    <button onclick="$('#uploadFile').click();return false;" style="background: #aaa">浏览文件</button>
                    <input type="file" name="uploadFile" required="required" id="uploadFile" style="display:none" onchange="$('#fileCover').val($(this).val());">
                    <div>
                        <button type="submit" style="display: block; margin: 0 auto;">提交</button> 
                    </div>
                </form>  
            </div>
            <div class="pannel hide" id="course-modal-1">
                <div>
                    <div class="close-container">
                        <a class="close" onclick="hide('#mask, #above-mask, #course-modal-1')">&times;</a>
                    </div>
                    <form action="${path}/admincoumanage/submit" method="post">
                        <table id="coursetable1">
                            <tr>
                                <td>课程编号</td>
                                <td> <input type="text" placeholder="必填" name="course.courseNo" required="required"></td>
                            </tr>
                            <tr>
                                <td>课程名</td>
                                <td> <input type="text" placeholder="必填" name="course.courseName" required="required"></td>
                            </tr>
                            <tr>
                                <td>学分</td>
                                <td> <input type="number" min="0" max="200" placeholder="必填" name="course.credit" required="required"></td>
                            </tr>
                            <tr>
                                <td>课时</td>
                                <td> <input type="number" min="0" max="200" placeholder="必填" name="course.period" required="required"></td>
                            </tr>
                            <tr>
                                <td>课程类别</td>
                                <td> <select name="course.courseType">
                                <option value="必修">必修</option>
                                <option value="选修">选修</option>
                                </select>
<!--                                  <input type="text" placeholder="必填" name="course.courseType" required="required"> 
 -->                                </td>
                            </tr>
                            <tr>
                                <td>开课学院</td>
                                <td> 
                                    <#if allcollegeCodeNameCourse?exists>
                                    <select name="course.collegeCode">
                                        <#list allcollegeCodeNameCourse as cc>
                                        <option value="${cc.collegeCode}">${cc.collegeCode}-${cc.collegeName}</option>
                                        </#list>
                                    </select>
                                    </#if>
                                </td>
                            </tr>
                            <tr>
                                <td>课程简介</td>
                                <td> <input type="text" name="course.introduction" ></td>
                            </tr>
                            <tr><td colspan="2"><button type="submit">提交</button></td></tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="pannel hide" id="course-modal-2">
                <div class="close-container">
                    <a class="close" onclick="hide('#mask, #above-mask, #course-modal-2')">&times;</a>
                </div>
                <form action="${path}/admincoumanage/update" method="post">
                    <table id="coursetable2">
                        <tr>
                            <td>课程编号</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>课程名</td>
                            <td> <input type="text" placeholder="必填" name="course.courseName" id="courseName" value="" required="required"></td>
                        </tr>
                        <tr>
                            <td>学分</td>
                            <td> <input type="number" min="0" max="200" placeholder="必填" id="credit" name="course.credit" value="" required="required"></td>
                        </tr>
                        <tr>
                            <td>课时</td>
                            <td> <input type="number" min="0" max="200" placeholder="必填" name="course.period" id="period" value="" required="required"></td>
                        </tr>
                        <tr>
                            <td>课程类别</td>
                            <td> 
                            <select name="course.courseType" id="courseType">
                                <option value="必修">必修</option>
                                <option value="选修">选修</option>
                                </select>
                            <!-- <input type="text" placeholder="必填" name="course.courseType" id="courseType" value="" required="required"> -->
                            </td>
                        </tr>
                        <tr>
                            <td>开课学院</td>
                            <td> 
                                <#if allcollegeCodeNameCourse?exists>
                                <select name="course.collegeCode"  id="collegeCode">
                                    <#list allcollegeCodeNameCourse as cc>
                                    <option value="${cc.collegeCode}" name="${cc.collegeName}">${cc.collegeCode}-${cc.collegeName}</option>
                                    </#list>
                                </select>
                                </#if>
                            </td>
                        </tr>
                        <tr>
                            <td>课程简介</td>
                            <td> <input type="text" name="course.introduction" id="introduction" value=""></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input type="hidden" name="course.id" id="id" value="" >
                                <input type="hidden" name="course.courseNo" id="courseNo" value="" >
                                <button type="button" onclick="ajaxupdate()" data-am-modal-close>确定</button>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div id="mask"></div>
        <div id="header"></div>
        <div id="main">
            <div id="side-menu"></div>
            <div id="container">
                <div id="inner-border">
                   <select id="keywords" name="keywords" class="major2">
                            <option value="all">全部</option>
                            <#if allcollegeCodeNameCourse?exists>
                            <#list allcollegeCodeNameCourse as c>
                            <option value="${c.collegeCode}">${c.collegeCode}-${c.collegeName}</option>
                            </#list>
                            </#if>
                        </select>
                        <button onclick="ajaxscreen()">筛选</button>
                    <button onclick="window.location.href = '${path}/adminUploadPreScore/fileDownload'">模板下载</button>
                    <button onclick="show('#mask, #above-mask, #fileupload-pannel')">批量导入</button>
                    <button onclick="window.location.href='${path}/courseExport/exportExcel'">批量导出</button>
                    <button onclick="show('#mask, #above-mask, #course-modal-1')">新增课程</button>
            
                    <form action="${path}/admincoumanage/batch" method="post">
                        <input type="hidden" name="checkboxValue" id="checkboxValue">
                        <div id="error" style="display:none">${error!}</div>
                        <table id="cousrsetable">
                            <thead>
                                <tr>
                                    <th>&nbsp;&nbsp;&nbsp;</th>
                                    <th>课程编号</th>
                                    <th>课程名</th>
                                    <th>学分</th>
                                    <th>课时</th>
                                    <th>课程类型</th>
                                    <th>学院名称</th>
                                    <th>操作</th>
                                </tr> 
                            </thead>
                            <tbody>
                                <#if course?exists>
                                <#list course as c> 
                                <tr>
                                    <td><input type="checkbox" value="${c.id}" name="couCheckbox" id="couCheckbox"></td>
                                    <td>${c.courseNo}</td>
                                    <td>${c.courseName}</td>
                                    <td>${c.credit}</td>
                                    <td>${c.period}</td>
                                    <td>${c.courseType}</td>
                                    <td>${c.collegeName}</td>
                                    <td><button class="edit" onclick="edit(this); show('#mask, #above-mask, #course-modal-2');return false;">编 辑</button></td> 
                                </tr>
                                </#list>
                                </#if>
                            </tbody>
                        </table>
                        <button class="delete" type="submit" onclick="getParam('cousrsetable', 'checkboxValue');">删除</button>
                    </form>
                </div>   
            </div>
        </div>
                <div id="footer"></div>
        <script type="text/javascript" src="${path}/js/admin-main-appearance.js"></script>

        <!-- DataTables JavaScript -->
        <script src="${path}/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
        <script src="${path}/bower_components/datatables-plugins/api/fnGetHiddenNodes.js"></script>
        <script src="${path}/bower_components/datatables-plugins/api/fnGetTd.js"></script>
        <script src="${path}/bower_components/datatables-plugins/api/fnGetTds.js"></script>
        <script src="${path}/bower_components/datatables-plugins/api/fnGetColumnData.js"></script>
        <script src="${path}/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
        <script src="${path}/js/linkPage.js"></script>
        <script type="text/javascript">
                            function ajaxscreen() {
                                $.ajax({
                                    type: "post",
                                    url: '${path}/admincoumanage/ajaxscreen',
                                    data: {
                                        keywords: $('#keywords').val(),
                                    },
                                    datatype: "json",
                                    success: function (data) {
                                        // alert("success");
                                        $('#cousrsetable').dataTable().fnClearTable();
                                         $.each(data,function(num,data){
                                          $('#cousrsetable').dataTable().fnAddData(['<input type="checkbox" value="' + data["id"] + '" name="couCheckbox" id="couCheckbox" >', data["courseNo"], data["courseName"], data["credit"], data["period"], data["courseType"], data["collegeName"], '<button name="editBtn" class="edit" class="edit" onclick="edit(this); show(\'#mask, #above-mask, #course-modal-2\');return false;">编辑</button>']);
                                                    
                                         })
                                      /*   for (var i = 0; i < data.length; i++)
                                            //alert(data[i]["courseNo"]);


                                            $(document).ready(function () {
                                                $('#cousrsetable').dataTable().fnClearTable();


                                                for (var i = 0; i < data.length; i++) {
                                                    $('#cousrsetable').dataTable().fnAddData(['<input type="checkbox" value="' + data[i]["id"] + '" name="couCheckbox" id="couCheckbox" >', data[i]["courseNo"], data[i]["courseName"], data[i]["credit"], data[i]["period"], data[i]["courseType"], data[i]["collegeCode"], '<button name="editBtn" onclick="edit(this); show(\'#mask, #above-mask, #course-modal-2\');return false;">编辑</button>']);
                                                    var id = data[i]["id"];
                                                    //alert(id);
                                                    var ot = $('#cousrsetable').dataTable();
                                                }
                                            }); */
                                    }
                                });
                            }
        </script>
        <script type="text/javascript">
            var row;
            function edit(node) {
                var tr1 = node.parentNode.parentNode;
                document.getElementById('coursetable2').rows[0].cells[1].innerText = tr1.cells[1].innerText;
                document.getElementById('courseName').value = tr1.cells[2].innerText;
                document.getElementById('credit').value = tr1.cells[3].innerText;
                document.getElementById('period').value = tr1.cells[4].innerText;
                document.getElementById('courseType').value = tr1.cells[5].innerText;
                document.getElementById('collegeCode').value = tr1.cells[6].innerText;
                document.getElementById('introduction').value = tr1.cells[7].innerText;
                document.getElementById('id').value = tr1.cells[0].children[0].value;
                document.getElementById('courseNo').value = tr1.cells[1].innerText;
                //setSelectChecked("collegeCode","")
                row = tr1.rowIndex;
                return row;
            }


            function ajaxupdate() {
                $.ajax({
                    type: "post",
                    url: '${path}/admincoumanage/ajaxupdate',
                    data: {
                        courseName: $('#courseName').val(),
                        credit: $('#credit').val(),
                        period: $('#period').val(),
                        courseType: $('#courseType').val(),
                        collegeCode: $('#collegeCode').val(),
                        introduction: $('#introduction').val(),
                        id: $('#id').val(),
                        courseNo: $('#courseNo').val(),
                    },
                    datatype: "json",
                    success: function (data) {
                        //alert("success");
                        //alert(data.course[0]["courseName"]);
                        //alert(data.error);
                        /* for(var i=0;i<data.length;i++)
                         alert(data[i]["majorNo"]); */
                        //alert(data.course[0]["courseNo"]);
                        document.getElementById('cousrsetable').rows[row].cells[2].innerText = data.course[0]["courseName"];
                        document.getElementById('cousrsetable').rows[row].cells[3].innerText = data.course[0]["credit"];
                        document.getElementById('cousrsetable').rows[row].cells[4].innerText = data.course[0]["period"];
                        document.getElementById('cousrsetable').rows[row].cells[5].innerText = data.course[0]["courseType"];
                        document.getElementById('cousrsetable').rows[row].cells[6].innerText = data.course[0]["collegeCode"];
                        document.getElementById('cousrsetable').rows[row].cells[7].innerText = data.course[0]["introduction"];
                        alert(data.error);
                    }
                });
            }
        </script>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#cousrsetable').DataTable({
                    responsive: true,
                    ordering: false,
                    searching: true,
                    "bLengthChange": false,
                    "bRetrieve": true,
                    "bFilter": true//过滤功能
                });
            });
        </script> 
        <script type="text/javascript">
            $(document).ready(function () {
                if ($("#error").html() != "") {
                    Alert($("#error").html());
                }
                //alert($("#error").html());}
            });
        </script> 
        <script>
            //自动关闭提示框  
            function Alert(str) {
                alert(str);
            }
        </script>
    </body>
</html>
